<template>
  <div>

    <!-- 个人中心 (动态面板) -->

    <div id="u1707" style="display:none; visibility:hidden;"></div>

    <!-- Unnamed (矩形) -->
    <div id="u1737" class="ax_default box_1">
      <div id="u1737_div" class=""></div>
      <div id="u1737_text" class="text ">
        <p class="big-text"><span>个人中心</span></p>
      </div>
    </div>


    <!-- Unnamed (线段) -->
    <div id="u1762" class="ax_default line">
      <img id="u1762_img" class="img">
      <div id="u1762_text" class="text " style="display:none; visibility: hidden">
        <p></p>
      </div>
    </div>

    <!-- Unnamed (组合) -->
    <div id="u1763" class="ax_default" data-left="1170" data-top="245" data-width="110" data-height="32"
         style="cursor: pointer;">

      <!-- Unnamed (矩形) -->
      <div id="u1764" class="ax_default primary_button">
        <div id="u1764_div" class="" tabindex="0"></div>
        <div id="u1764_text" class="text ">
          <p @click="handleClickToPIM()"><span>个人信息
          </span></p>
        </div>
      </div>

      <div id="u1764_account">
        <el-button type="primary" @click="handleClickToAccount()">账号设置</el-button>
      </div>

      <!-- Unnamed (形状) -->
      <div id="u1765" class="ax_default _形状">
        <img id="u1765_img" class="img " src="@/components/css/images/home/u1765.svg">
        <div id="u1765_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>
    </div>


    <!-- Unnamed (图片 ) -->
    <div id="u1768" class="ax_default _图片_">
      <img id="u1768_img" class="img " src="@/components/css/images/home/u2609.svg">
      <div id="u1768_text" class="text " style="display:none; visibility: hidden">
        <p></p>
      </div>
    </div>

    <!-- Unnamed (矩形) -->
    <div id="u1770" class="ax_default _文本段落">
      <div id="u1770_div" class=""></div>
      <div id="u1770_text" class="text ">
        <p><span>最后登录时间：</span></p>
      </div>
    </div>

    <!-- Unnamed (矩形) -->
    <div id="u1772" class="ax_default _文本段落">
      <div id="u1772_div" class=""></div>
      <div id="u1772_text" class="text ">
        <p><span>{{ loginDate }}</span></p>
      </div>
    </div>

    <!-- Unnamed (矩形) -->
    <div id="u1773" class="ax_default _文本段落">
      <div id="u1773_div" class=""></div>
      <div id="u1773_text" class="text ">
        <p><span>姓名：{{ accountName }}</span></p>
      </div>
    </div>

    <!-- Unnamed (矩形) -->
    <div id="u1774" class="ax_default _文本段落">
      <div id="u1774_div" class=""></div>
      <div id="u1774_text" class="text ">
        <p><span>昵称:</span></p>
      </div>
    </div>

    <!-- Unnamed (矩形) -->
    <div id="u1775" class="ax_default _文本段落">
      <div id="u1775_div" class=""></div>
      <div id="u1775_text" class="text ">
        <p><span>电话：{{ phoneNumber }}</span></p>
      </div>
    </div>

    <!-- Unnamed (矩形) -->
    <div id="u1777" class="ax_default _文本段落">
      <div id="u1777_div" class=""></div>
      <div id="u1777_text" class="text ">
        <p><span>{{ nickName }}</span></p>
      </div>
    </div>

    <!-- Unnamed (矩形) -->
    <div id="u1779" class="ax_default _文本段落">
      <div id="u1779_div" class=""></div>
      <div id="u1779_text" class="text ">
        <p><span>创建账号时间：</span></p>
      </div>
    </div>

    <!-- Unnamed (矩形) -->
    <div id="u1780" class="ax_default _文本段落">
      <div id="u1780_div" class=""></div>
      <div id="u1780_text" class="text ">
        <p><span>用户邮箱：</span></p>
      </div>
    </div>

    <!-- Unnamed (矩形) -->
    <div id="u1781" class="ax_default _文本段落">
      <div id="u1781_div" class=""></div>
      <div id="u1781_text" class="text ">
        <p><span>{{ createTime }}</span></p>
      </div>
    </div>

    <!-- Unnamed (矩形) -->
    <div id="u1782" class="ax_default _文本段落">
      <div id="u1782_div" class=""></div>
      <div id="u1782_text" class="text ">
        <p><span>{{ email }}</span></p>
      </div>
    </div>

    <!-- Unnamed (矩形) -->
    <div id="u1783" class="ax_default _文本段落">
      <div id="u1783_div" class=""></div>
      <div id="u1783_text" class="text ">
        <p><span>性别：</span></p>
      </div>
    </div>

    <!-- Unnamed (矩形) -->
    <div id="u1784" class="ax_default _文本段落">
      <div id="u1784_div" class=""></div>
      <div id="u1784_text" class="text ">
        <p><span>{{ gender === 1 ? '男' : (gender === 0 ? '女' : '其他') }}</span></p>
      </div>
    </div>

    <!-- Unnamed (矩形) -->
    <div id="u1785" class="ax_default _文本段落">
      <div id="u1785_div" class=""></div>
      <div id="u1785_text" class="text ">
        <p><span>ID：</span></p>
      </div>
    </div>

    <!-- Unnamed (矩形) -->
    <div id="u1786" class="ax_default _文本段落">
      <div id="u1786_div" class=""></div>
      <div id="u1786_text" class="text ">
        <p><span>{{ accountId }}</span></p>
      </div>
    </div>

    <div>
      <el-dialog
          title="账号设置 - 修改账户密码"
          :visible.sync="dialogVisible"
          width="50%"
      >
        <el-form :model="form" label-width="180px" class="custom-form">
          <el-form-item label="用户名：" class="form-item">
            <el-input
                placeholder="请输入内容"
                v-model="accountName"
                :disabled="true">
            </el-input>
          </el-form-item>
          <el-form-item label="旧密码：" class="form-item">
            <el-input type="password" v-model="form.oldPassword" class="input-field"/>
          </el-form-item>
          <el-form-item label="新密码：" class="form-item">
            <el-input type="password" v-model="form.password" class="input-field"/>
          </el-form-item>
          <el-form-item label="确认密码：" class="form-item">
            <el-input type="password" v-model="form.confirmPassword" class="input-field"/>
          </el-form-item>
          <el-form-item class="button-item">
            <el-button type="primary" @click="submitForm">保存</el-button>
            <el-button type="primary" @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>

</template>

<script>
import {Message} from "element-ui";

export default {
  name: "CenterView",
  data() {
    return {
      accountId: '',
      accountName: '',
      phoneNumber: '',
      dialogVisible: false,
      form: {},
      loginDate: '',
      email: '',
      nickName: '',
      createTime: '',
      gender: '',
    }
  },
  methods: {
    handleClickToPIM() {
      // 跳转到 PIM
      this.$router.push('/pim');
    },

    resetForm() {
      // 重置表单
      this.form = {
        username: '',
        oldPassword: '',
        password: '',
        confirmPassword: '',
      };
    },

    handleClickToAccount() {
      this.dialogVisible = true;
    },

    getAccountByaccountId() {
      this.accountId = sessionStorage.getItem("accountId");
      this.$axios.get(`/account/${this.accountId}`)
          .then(response => {
            if (response.data.code === 200) {
              let data = response.data.data;
              this.accountName = data.accountName;
              this.phoneNumber = data.phoneNumber;
              this.email = data.email;
              this.nickName = data.nickName;
              this.createTime = data.createTime;
              this.loginDate = data.loginDate;
              this.gender = data.gender;
              this.accountId = data.accountId;
            } else {
              Message({
                type: "error",
                message: response.data.msg,
                duration: 1000
              })
            }
          })
    },

    submitForm() {
      if (this.form.password !== this.form.confirmPassword) {
        Message({
          type: "error",
          message: "新密码和确认密码不一致，请重新输入",
          duration: 1000
        });
        return;
      }

      this.$axios.get(`/account/${this.accountId}`)
          .then(response => {
            if (response.data.code === 200) {
              let data = response.data.data;
              if (data.password === this.form.oldPassword) {
                // 构建请求数据
                const updateData = {
                  accountId: data.accountId,
                  password: this.form.password
                };

                this.$axios.post('/account/updatePassword', updateData)
                    .then(response => {
                      if (response.data.code === 200) {
                        Message({
                          type: "success",
                          message: response.data.msg,
                          duration: 1000
                        });
                        console.log(response.data.msg)
                        this.dialogVisible = false;
                      } else {
                        Message({
                          type: "error",
                          message: response.data.msg,
                          duration: 1000
                        });
                      }
                    })
                    .catch(error => {
                      Message({
                        type: "error",
                        message: error.data.msg
                      })
                    })
              } else {
                Message({
                  type: "error",
                  message: "旧密码不正确，请重新输入",
                  duration: 1000
                });
              }
            }
          })
    }
  },
  created() {
    this.getAccountByaccountId();
  }
}</script>

<style scoped>
.big-text {
  color: #ff6e90;
  font-size: 24px;
}
</style>